<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
    .box{
        max-width: 360px;
        margin: 0 auto;
    }
    *{
        margin: 0;
        padding: 0;
    }
    img{
        width: 100%;
    }
    body{
        background: #f6f6f6;
    }
    .clearfix::after{
        display: table;
        content: "";
        clear: both;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .w10{
        width: 10%;
    }
    .w80{
        width: 80%;
    }
    .top{
        background: url(img/top_bg.jpg);
        background-size: 100% 120%;
    }
    .three_line, .login_txt{
        height: 40px;
        padding: 12px 8px 8px 8px;
        box-sizing: border-box;
        color: white;
        font-size: 14px;
    }
    .login_txt{
        padding: 10px 0px 8px 4px;
        box-sizing: border-box;
    }
    .search{
        position:relative;
        height:40px;
        padding:5px;
        box-sizing:border-box;
    }
    input{
        height: 30px;
        border-radius: 20px;
        width: 100%;
        border: none;
        outline: none;
        padding-left:100px ;
        background:rgb(255,255,255)  url("img/logo.png") no-repeat 20px center;
        background-size: 20px;
    }
    .search_icon{
        position: absolute;
        width: 18px;
        height: 15px;
        background: url(img/jd-sprites.png) -80px 0px;
        background-size: 200px;
        top: 14px;
        left: 55px;
    }
    .search_line{
        position: absolute;
        background: #cccbcb;
        width: 1px;
        height: 15px;
        top: 13px;
        left: 52px;
    }
    .banner{
        margin: 3%;
    }
    .banner img{
        border-radius: 8px;
    }
    .item{
        width: 20%;
        height: 80px;
        text-align: center;
        padding: 10px;
        box-sizing: border-box;
        font-size: 10px;
    }
    .item img{
        width: 80%;
        margin-bottom: 5px;
    }
    .title{
        color: #1A1A1A;
        font-family: 宋体;
    }
    .time{
        margin: 0px 0px 0px 10px;
        border-radius: 10px;
        font-family: 宋体;
        border: 1px solid #FD4916;
    }
    .time span:nth-of-type(1){
        padding: 1px 5px;
        box-sizing: border-box;
        border-radius: 10px;
        font-family: 黑体;
        color: #f6f6f6;
        background: #FD4916;
    }
    .time span:nth-of-type(2){
        padding:0px 4px 0px 0px;
        box-sizing: border-box;
    }
    .more{
       font-family: 宋体;
        color:#FD4916 ;
        padding: 0px 20px;
        box-sizing: border-box;
        background: url("https://wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/arrow_rt_2ccb8cd5.png") no-repeat right center;
        background-size: 17px;
    }
    .pitem{
        width: 80px;
        float: left;
    }
    .p_container{
        width: 800px;
        background: #FFFFFF;
        border-radius:15px 15px 0px 0px;
    }
    .p_container2{
        width: 100%;
        overflow-x: scroll;
        padding-bottom: 20px;
    }
    .product{
        height: 125px;
        overflow: hidden;
    }
    .img img:nth-of-type(1){
        border-radius:15px 0px 0px 0px;
    }
    .img1 img:nth-of-type(1){
        border-radius:0px 15px 0px 0px;
    }
    .price{
        padding: 0px 17px;
        font-family: 黑体;
        color: red;
        box-sizing: border-box;
    }
    .old_price{
        padding: 0px 17px;
        color: #cccbcb;
        font-family: 宋体;
        text-decoration: line-through;
        box-sizing: border-box;
    }
</style>
<div class="box">
    <div class="all">

<!--        top开始-->
        <div class="top">
            <div class="top_nav clearfix">
                <div class="three_line fl w10">
                    <img src="img/three_line.png" alt="">
                </div>
                <div class="search fl w80">
                    <div class="search_icon"></div>
                    <div class=""></div>
                    <div class="search_line"></div>
                    <input class="input" placeholder="搜索商品/店铺……" />
                </div>
                <div class="login_txt fl w10">
                    登录
                </div>
            </div>
            <div class="banner">
                <img src="img/1.dpg" alt="">
            </div>
        </div>
<!--        top结束-->

<!--        nav开始-->
        <div class="nav clearfix">
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/90907/33/16508/7338/5e7cd12fE18b7f28c/62495feb17944a2c.png" alt="">
                京东超市
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/95626/6/16650/5992/5e7d5fdeE251a8742/d29fcc84ee0211f7.png" alt="">
                数码电器
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/105719/14/16594/7294/5e7d605eE007a21e7/63392310fbb001a4.png" alt="">
                京东服饰
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/85541/12/16732/5068/5e7d60f9E0ff389b4/de3b049134031e56.png" alt="">
                京东生鲜
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/96727/8/16477/5183/5e7d6249E4730c38a/0f70da903eded263.png" alt="">
                京东到家
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/96542/9/16707/3569/5e7d62bcE5c4ee6a7/3bf6ac36ac9f17d9.png" alt="">
                充值缴费
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/86437/25/16675/6585/5e7d62e4E1095d733/d0d685ed0477d268.png" alt="">
                9.9元拼
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/110232/17/10270/4813/5e7d6310E79c9cb8d/6786eed1b786c010.png" alt="">
                领券
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/96795/33/16662/4749/5e7d6385Ec31e4b29/f36c778122286405.png" alt="">
                赚钱
            </div>
            <div class="item fl">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/97837/22/16281/7606/5e7d6411E0c0a91d6/93e0b359bfdf0239.png" alt="">
                PLUS会员
            </div>
        </div>
<!--nav结束-->

<div>
    <img src="https://m.360buyimg.com/mobilecms/s750x200_jfs/t1/113793/21/9880/76441/5ee31da1E29d1afd5/dcb51ded24e8cc8f.png.webp" alt="">
</div>

        <div class="miansao">
            <div class="ms_header clearfix">
                <div class="title fl" >京东秒杀</div>
                <div class="time fl">
                        <span>8点场</span>
                        <span>00:00:00</span>
                </div>
                <div class=" more fr">
                    更多秒杀
                </div>
            </div>
        </div>
        <div class="product">
            <div class="p_container2">
                <div class="p_container clearfix">
                        <div class="pitem">
                            <div class="pic img"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/132025/9/1889/131792/5edf43e0Ee22520a8/d18425009e9f3ef7.jpg.dpg" /></div>
                            <div class="price">&yen;2199</div>
                            <div class="old_price">&yen;2399</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/115762/23/8708/172553/5ed09dc5E86259db2/24be6183bc36be8a.jpg.dpg" /></div>
                            <div class="price">&yen;2999</div>
                            <div class="old_price">&yen;2499</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/118253/34/8931/120145/5ed47803Ebb37302b/5af573ff75abe26d.jpg.dpg" /></div>
                            <div class="price">&yen;1099</div>
                            <div class="old_price">&yen;3399</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/137664/18/706/54481/5ee5f8edE4f0c5ff4/2874e0d24a61e807.png.webp" /></div>
                            <div class="price">&yen;9699</div>
                            <div class="old_price">&yen;2499</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/140497/15/526/77539/5ee3528eEc6d66431/1f3e906c1798dba0.jpg.dpg" /></div>
                            <div class="price">&yen;6699</div>
                            <div class="old_price">&yen;2399</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/132025/9/1889/131792/5edf43e0Ee22520a8/d18425009e9f3ef7.jpg.dpg" /></div>
                            <div class="price">&yen;63199</div>
                            <div class="old_price">&yen;2399</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/143672/1/695/114176/5ee701ceE17c13119/e36f776d795e58f4.jpg.dpg" /></div>
                            <div class="price">&yen;209</div>
                            <div class="old_price">&yen;2399</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/132025/9/1889/131792/5edf43e0Ee22520a8/d18425009e9f3ef7.jpg.dpg" /></div>
                            <div class="price">&yen;2199</div>
                            <div class="old_price">&yen;26399</div>
                        </div>
                        <div class="pitem">
                            <div class="pic"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/133208/38/1993/149816/5ee222d7Eafe93bb9/6d738f8f7b25b0a6.jpg.dpg" /></div>
                            <div class="price">&yen;2199</div>
                            <div class="old_price">&yen;2399</div>
                        </div>
                        <div class="pitem">
                            <div class="pic img1"><img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/132025/9/1889/131792/5edf43e0Ee22520a8/d18425009e9f3ef7.jpg.dpg" /></div>
                            <div class="price">&yen;2099</div>
                            <div class="old_price">&yen;2399</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>